<style>
ul#locsoare li {
	display:inline;
	margin:5px;
	padding:10px;
	//width: 30px;
	text-align: center;
	color: white;
	cursor:pointer;
}
.red {
	background:red;
}
.green {
	background:green;
}
</style>
<script type="text/javascript">
$(document).ready(function()
	{
	$('li').click(function() {
		if ($(this).attr('class')=='green')
		{
			//document.getElementById('valori').innerHTML += $(this).attr('id');
			$(this).removeClass('green').addClass('red');
		}
		else
		{
			//document.getElementById('valori').innerHTML -= $(this).attr('id');
			$(this).removeClass('red').addClass('green');
		}
	});
});
</script>
<div class="row-fluid" style="margin-top:50px;">
	<div class="span2"></div>
	<div class="span8">
		<h3><?php echo $film['titlu'];?></h3>
		<ul id="locsoare" style="decoration:none">
		<?php
			for($j = 0; $j < count($locuri); $j++)
			{
				if($locuri[$j])
				{
					echo '<li id="loc_'.$j.'" class="red"><b> '.($j+1).'</b></li>';
				}
				else 
				{
					echo'<li id="loc_'.$j.'" class="green"><b> '.($j+1).'</b></li>';
				}
			}
		?>
		</ul>
		<div id='valori' ></div>
		<form action="<?php echo base_url();?>" method="post">
			<input type="hidden"/><br>
			<center><input type="submit" value="Rezerva" name= "submit"  id = "submit" style="background:#39f;padding:10px 15px 10px;border:0;color:white;"/></center>
		</form>

	</div>
	<div class="span2"></div>
</div>